<template>
  <el-form class="login">
    <div class="loginTitle">
      <text>输入用户名密码注册吧</text>
    </div>
    <div class="myInput">
      <el-icon style="width: 2em; height: 2em; margin-right: 5px"
        ><User
      /></el-icon>
      <span>账号：</span>
      <el-input class="list" v-model="account"></el-input>
    </div>
    <div class="myInput">
      <el-icon style="width: 2em; height: 2em; margin-right: 5px"
        ><Check
      /></el-icon>
      <span>密码：</span>
      <el-input class="list" password v-model="password"></el-input>
    </div>
    <el-button class="loginBtn" @click="register" type="primary"> 注册 </el-button>
  </el-form>
</template>
<script lang="js" setup>
import request from '@/util/request';
import {onMounted, ref} from 'vue'
import router from '@/router';
import { useRoute } from 'vue-router';


const route=useRoute()
const type=route.query.mytype
console.log(route.query)
      let account=ref("")
      let password=ref("")

    function register(){
      let data={
        userAccount:account.value,
        userPassword:password.value,
        userType:type
      }
      let a=JSON.stringify(data)
      console.log(a)
      //网络请求
      request.post('/api/user/register',data).then(res=>{
        console.log(res)
        if(res.success===true){
          router.push('/login/loginForm')
        }
      })
    }
</script>

<style scoped>
.login {
  width: 600px;
  background-color: #fff;
  border: 10px solid #fff;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 8px #eeeeee;
}

.login .loginTitle {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 28rpx 0;
}

.login .loginTitle text {
  color: #1e9fff;
  font-size: 40px;
  font-weight: bold;
}
.myInput {
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.myInput span {
  width: 80px;
  font-size: 20px;
  text-align: center;
}
</style>
